<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>员工管理</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form" lay-filter="searchForm">

            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addEmp_btn">添加员工</a>
            </div>

        </form>
    </blockquote>
    <!--数据表格-->
    <table  id="staffList" lay-filter="staffList"></table>
</div>

<script type="text/html" id="ManageBar">
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    <button class="layui-btn layui-btn-xs layui-btn-danger delAll_btn" lay-event="del">删除</button>
</script>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.extend({
        dtree: '/layui_ext/dtree/dtree'
    }).use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
        "okUtils", "okMock","dtree"], function () {
        table = layui.table;
        form = layui.form;
        layer = layui.layer;
        laydate = layui.laydate;
        okLayer = layui.okLayer;
        okUtils = layui.okUtils;
        okMock = layui.okMock;
        $ = layui.jquery;
        dtree = layui.dtree;

        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem: '#staffList',
            url: "/api/staff/staffManage",
            limit: 20,
            page: true,
            id: "staffManage",
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[{
                type: "checkbox",
                fixed: "left"
            }, {
                field: "staffId",
                title: "员工编号",
                width: 150,
                sort: true
            }, {
                field: "name",
                title: "员工姓名",
                width: 150
            }, {
                field: "affiliatedNetworkName",
                title: "所属网点",
                width: 150
            }, {
                field: "loginAccount",
                title: "登录账号",
                width: 150
            }, {
                field: "cellphone",
                title: "手机",
                width: 150
            }, {
                field: "telephone",
                title: "座机",
                width: 150
            }, {
                field: "homeAddress",
                title: "家庭住址",
                width: 150
            }, {
                field: "IDCard",
                title: "身份证",
                width: 150
            },{
                title: "操作",
                fixed: 'right',
                width: 200,
                align: 'center',
                toolbar: '#ManageBar'
            }
            ]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });




        //监听行工具栏事件
        table.on('tool(staffList)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;

            if (layEvent === 'edit') { //编辑
                alert(JSON.stringify(data))
                edit(data);

            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除该用户信息？', {icon: 3, title: '提示信息'}, function (index) {

                    $.get("/api/staff/delStaff", {
                        staff_ids: data.staffId  //将需要删除的员工编号作为参数传入
                    }, function (data) {
                        if (data.code == 200) {
                            tableIns.reload(); //刷新表格数据（也即让table重新加载url）
                            layer.close(index);//关闭弹出框
                        } else {
                            layer.close(index);//关闭弹出框
                            layer.msg(data.msg, {icon: 2});
                        }

                    })
                });
            } else if (layEvent === 'look') { //预览
                layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
            }
        });


        //新增员工
        $(".addEmp_btn").click(function() {
            var index = layui.layer.open({
                title: "新增员工信息",
                type: 2,
                content: "/page/staff/staffAdd",
                success: function (layero, index) {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回角色列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })

        })


        //编辑员工信息
        function edit(data) {
            var index = layui.layer.open({
                title: "编辑员工信息",
                type: 2,
                content: "/page/staff/editStaff",
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    //如果是编辑赋初始值
                    //body.find("#roleId").attr("hidden", hidden);
                    body.find("#hiddenEdit").val(JSON.stringify(data));
                    //form.render();
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回角色列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        }


        //删除员工信息
        // function del(id) {
        //     $.get("/api/staff/delStaff", {
        //         id: id
        //     }, function (data) {
        //         if (data.code == 200) {
        //             layer.msg("删除成功", {"icon": 1});
        //             userTable.reload(); //刷新表格数据（也即让table重新加载url）
        //             layer.close(index);//关闭弹出框
        //         } else {
        //             layer.close(index);//关闭弹出框
        //             layer.msg(data.msg, {
        //                 icon: 2
        //             });
        //         }
        //     })
        // }


    })
</script>


<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
</script>


</body>
</html>
